
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太空人时间表</title>
    <style>
            <style>
        @font-face {
            font-family: "led regular";
            src: url("./Open\ 24\ Display\ St.ttf");
        }
        #p{
            font-family: "led regular";
            font-size: 50px;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        #watch{
            width: 400px;
            height: 400px;
            border-radius: 200px;
            border:2px solid black;
           
        }
        
       #line-on{
           width: 325px;
           height: 2px;
           background-color: black;
           transform: scaleY(1);
           position: absolute;
           left: 48px;
           top: 89px;
       }
       #line-down{
           width: 325px;
           height: 2px;
           background-color: black;
           transform: scaleY(1);
           position: absolute;
           top: 329px;
           left: 47px;
       }
       #line-mid{
           width: 2px;
           height: 82px;
           background-color: black;
           transform: scaleY(1);
           position: absolute;
           left: 207px;
           top: 8px;
       }
       #elec{
           width: 60px;
           height: 50px;
           position: absolute;
           left: 140px;
       }
       #elec-num{
           font-family: "led regular";
           font-size: 30px;
           position: absolute;
           left: 90px;
           top: 20px;
       }
       #sun{
           width: 50px;
           height: 50px;
           position: absolute;
           left: 207px;
       }
       #temperature{
           position: absolute;
           left: 210px;
           top:50px;
       }
       #weather{
        position: absolute;
        left: 310px;
        top: 50px;
       }
       #now{
           position: absolute;
           left: 263px;
           top: 50px;
           font-weight: bolder;
       }
       #hert{
           width: 60px;
           position: absolute;
           left: 50px;
           top: 270px;
       }
       #hert-num{
           font-size: 15px;
           position: absolute;
           left: 55px;
           top: 240px;
       }
       #hert-now{
           position: absolute;
           font-size: 20px;
           font-weight: bolder;
           left: 110px;
           top: 275px;
       }
       #time{
           position: absolute;
           font-size: 20px;
           left: 300px;
           top: 85px;
       }
       #man{
           width: 200px;
           position: absolute;
           left: 110px;
           top: 150px;
           z-index: -1;
          transform: rotate(290deg);
       }
       #img-high{
           position: absolute;
           left: 242px;
           top: 57px;
       }
       #img-low{
           position: absolute;
           left: 242px;
           top: 75px;
       }
       #tem-high{
           position: absolute;
           left: 215px;
           top: 45px;
           font-size: 12px;
       }
       #tem-low{
           position: absolute;
           left: 215px;
           top: 62px;
           font-size: 12px;
       }
       #run{
           width: 30px;
           position: absolute;
           left: 280px;
           top: 290px;
       }
       #run-num{
        position: absolute;
        left: 315px;
        top: 282px;
       }
       #down-mid{
           width: 2px;
           height: 82px;
           transform: scaleY(1);
           background-color: black;
           position: absolute;
           left: 207px;
           top: 330px;
       }
    </style>

    </style>
</head>
<body>
    <div id="watch">
        <img id="elec" src="./img/电量.png" alt="">
        <p id="elec-num">电量:100%</p>
        <img id="sun" src="" alt="">
        <p id="now"></p>
        <p id="time"></p>
        <img id="man" src="./img/3c235f84458df48e57def352432d1f35.gif" alt="">
        <p id="hert-num">80~120</p>
        <img id="hert" src="./img/面性心率图标.png" alt="">
        <p id="hert-now">92</p>
        <img id="img-high" src="./img/三角形_上.png" alt="">
        <img id="img-low" src="./img/三角形.png" alt="">
        <p id="tem-high"></p>
        <p id="tem-low"></p>
        <p id="weather"></p>
        <div id="line-on"></div><!--用transform画线条,给边框进行X或者Y轴的缩小-->
        <div id="line-mid"></div>
        <p id="p"></p>
        <img id="run" src="./img/步数.png" alt="">
        <p id="run-num">6745</p>
        <div id="line-down"></div>
        <div id="down-mid"></div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        
        setInterval(function time () {   //因为要实时获取时间，索引用了一个定时器,每隔10ms就会执行一次time这个函数
            var data=new Date()
            var hour=data.getHours(); //获取当前时间：时分秒
            var min=data.getMinutes()
            var second=data.getSeconds()
            if(second<10){            //为了美观，个位数的时间就会在前面添加一个数字0。
                second="0"+second;
            }
            if(min<10){
                min="0"+min;
            }
            if(hour<10){
                hour="0"+hour
            }
            var p=document.getElementById("p")
            p.innerText=hour+":"+min+":"+second  //把用JS实时获取的时间插入到p标签。
         },10)

        
         //获取当前天气，并动态显示
         var xmlhttp;
         function wether(){
            $.ajax({        //用jqurey封装的AJAX来从网站获取天气数据
                url:"http://wthrcdn.etouch.cn/weather_mini?city=成都", //查找天气的网站，
                dataType:"json",   //预期服务器返回的数据类型。
                async:false,   //设为同步请求，将锁住浏览器，用户的其他操作必须等请求完成才能进行
            success:function(data){    //必须是function类型的参数，如果请求成功就会调用这个函数，
                    function tianqi(){ // 闭包函数  函数外部可以访问内部的变量
                        xmlhttp=data;
                        return xmlhttp;
                    };
                tianqi();
                }
            })
            console.log(xmlhttp);
    }
    setInterval(wether(),1000);  //因为是显示实时温度所以就用定时器，每个1s调用一次函数。
    
    var high=xmlhttp.data.forecast[0].high  //获取最高气温  数据类型是： 高温 26℃
    var low=xmlhttp.data.forecast[0].low;   //获取最低气温  数据类型是： 低温 16℃
    high=high.replace(/[高温 ]/g,"")        //利用正则表达式把 “高温 ”去除 
    low=low.replace(/[低温 ]/g,"")          //利用正则表达式把 “低温 ”去除 
    var now=xmlhttp.data.wendu;              //获取当前的温度
    var img=["./img/太阳.png","./img/多云.png","./img/雾霾.png","./img/下雨.png"] //该数组保存的是天气的图标的地址名
    var weather=xmlhttp.data.forecast[0].type;   //获取天气的类型  例如：小雨  多云  阴
    
    function tem(){
        let temhigh=document.getElementById("tem-high");
        let temlow=document.getElementById("tem-low");  //获取准备用来保存最高温和最低温的标签
        temlow.innerText=low                            //往这个标签中插入数据
        temhigh.innerText=high
        let wh=document.getElementById("weather");     //获取准备用来保存天气类型的标签
        wh.innerText=weather
        var whnow=document.getElementById("now");      //保存现在的温度
        whnow.innerText=now+"℃"
    }
   setInterval(tem(),1000);      //因为是显示实时温度所以就用定时器，每个1s调用一次函数。

    //天气图片动态改变
   function whimg(){
       let sun=document.getElementById("sun");  //获取用来保存天气图片的img标签。
       if(weather=="多云"||weather=="阴"){       //weather是从网站获取的天气类型。
           sun.src=img[1];                      //然后用if判断里面是否等于 “多云”、“阴”，如果相等，就把img标签中的src地址赋值位之前的img数组的值 
       }                        //下面依次类推
       else if(weather=="霾"){
            sun.src=img[2];
            
        }
            else if(/[雨]/g.test(weather)){
                sun.src=img[3]
            }
            else{
                sun.src=img[0]
            }
   }
   setInterval(whimg(),1000)   

   //显示月份 日期  星期的函数
   function shijian(){    
       let date=new Date();   
       let month=date.getMonth()+1;  //用来显示月份  因为date.getMonth()获取到的月份要少一个月，所以就加1。
       let day=date.getDate();         //获取日
       let week=date.getDay();          //获取星期几  但是是阿拉伯数字
       let timer=document.getElementById("time");

       let number=["一","二","三","四","五","六","日"];  //因为星期显示阿拉伯数字 所以用if来改变阿拉伯数字，显示大写的数字
       if(week==1){
            week=number[0];
            timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
       }else if(week==2){
            week=number[1];
            timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
       }else if(week==3){
            week=number[2];
            timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
       }else if(week==4){
           week=number[3];
           timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
       }else if(week=5){
           week=number[4]
           timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
       }else if(week==6){
           week=number[5];
           timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
       }else {
        timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
       }
   }
   shijian();
    </script>




</body>
</html>